<template>
	<view class="steps">
		<view
			class="arrow"
			:style="{
				left: percent + '%'
			}"
		>
			<u-icon name="arrow-down-fill" color="#d1d1d1"></u-icon>
		</view>
		<view class="flex align-center">
			<view
				class="step"
				v-for="(item, index) in steps"
				:style="{
					background: item.color
				}"
			></view>
		</view>
		<view class="flex align-center" v-if="size == 'lg'">
			<view
				class="step_text"
				v-for="(item, index) in steps"
				:style="{
					color: item.color
				}"
			>
				{{ item.text }}
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'weightStep',
	props: {
		size: {
			type: String,
			default: 'default'
		},
		bmi: {
			type: Number,
			default: 17
		}
	},
	computed: {
		percent() {
			let percent = 0,
				pre1 = 0,
				num = 0;
			if (this.bmi >= 28) {
				pre1 = 0.5;
				num = 3;
			} else if (this.bmi >= 24) {
				pre1 = (this.bmi - 24) / 6;
				num = 2;
			} else if (this.bmi >= 18.5) {
				pre1 = (this.bmi - 18.5) / 5.5;
				num = 1;
			} else if (this.bmi < 18.5) {
				pre1 = 0.5;
				num = 0;
			}
			percent = (1 / 4) * (num + pre1);

			return percent * 100;
		}
	},
	data() {
		return {
			steps: [
				{
					color: '#ffc523',
					text: '偏低'
				},
				{
					color: '#12c88b',
					text: '标准'
				},
				{
					color: '#fe808e',
					text: '超重'
				},
				{
					color: '#fe606e',
					text: '肥胖'
				}
			]
		};
	}
};
</script>

<style scoped lang="scss">
.steps {
	position: relative;
	width: 100%;
	.arrow {
		position: absolute;
		top: -30upx;
		left: 0;
		transform: translateX(-50%);
	}
	.step {
		flex: 1;
		height: 10upx;

		border-radius: 50upx;
		& + .step {
			// margin-left: 2upx;
		}
	}
	.step_text {
		flex: 1;
		text-align: center;
		font-size: 20upx;
		margin-top: 10upx;
		& + .step_text {
			// margin-left: 2upx;
		}
	}
}
</style>
